<template>
	<view>
		<view class="send-bar-box" v-if="!show">
			<view class="send-input" @click="open">说点什么吧</view>
			<view class="toolbar" @click="open">
				<u-icon name="pinglun" size="38" custom-prefix="iconfont"></u-icon>
				<view class="toolbar-text">{{total}}</view>
			</view>
			<view class="toolbar" @click="thumb">
				<u-icon name="aixin" size="40" custom-prefix="iconfont"></u-icon>
				<view class="toolbar-text">{{giveNum}}</view>
			</view>
		</view>
		<u-mask :show="show" @click="close">
			<view @tap.stop class="bottom-textarea" :class="{'textarea-border': inputBottom > 0}" :style="{bottom: inputBottom+'px'}">
				<view class="textarea-box">
					<view class="textarea-container">
						<textarea :focus="focused" :placeholder="placeholder" class="textarea" v-model="msg.text" :adjust-position="false" :show-confirm-bar="false"></textarea>
					</view>
					<view class="send-box" v-if="msg.text">
						<view class="send-btn" @click="send">发 送</view>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		props: {
			total: {
				type: Number,
				default: 0
			},
			giveNum: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				index: 0,
				show: false,
				msg: {
					text: '',
					data: {},
					type: '',
				},
				placeholder: '说点什么吧',
				inputBottom: 0,
				focused: false,
			}
		},
		created() {
			this.init();
	    },
		methods: {
			init() {
				uni.onKeyboardHeightChange((e)=>{
					this.inputBottom = e.height;
				});
			},
			send() {
				this.$emit('send',this.msg,this.index);
			},
			thumb() {
				this.$emit('thumb');
			},
			open() {
				this.show = true;
				this.msg.type = 'comment';
				this.placeholder = '说点什么吧';
				this.focused = true;
			},
			chat(e,i) {
				this.index = i;
				this.show = true;
				this.msg.type = 'chat';
				this.msg.data = e;
				this.placeholder = '回复'+e.nickName+'：';
				this.focused = true;
			},
			reply(e) {
				this.show = true;
				this.msg.type = 'reply';
				this.msg.data = e;
				this.placeholder = '回复'+e.nickName+'：';
				this.focused = true;
			},
			close() {
				this.show = false;
				this.msg.text = '';
				this.placeholder = '说点什么吧'
				this.focused = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.textarea-tip {
		font-size: 28rpx;
		color: #c8c9cc;
		margin-bottom: 10px;
	}
	
	.bottom-textarea {
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0px;
		background-color: #f2f2f2;
		padding: 10px;
	}
	
	.textarea-border {
		border-bottom: 1px solid #909399;
	}
	
	.textarea-box {
		display: flex;
	}
	
	.textarea-container {
		background-color: #fff;
		background-color: #fff;
		padding: 5px 10px;
		border-radius: 10px;
		display: flex;
		flex: 1;
	}
	
	.textarea {
		width: 100%;
		height: 100px;
	}
	
	.send-box {
		margin-left: 10px;
		position: relative;
		width: 70px;
	}
	
	.send-btn {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #7908f533;
		color: #fff;
		padding: 6px;
		border-radius: 3px;
	}
	
	.send-bar-box {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		box-shadow:0 0 9px 3px #f4f4f5; 
		padding: 10px;
		display: flex;
		align-items: center;
		z-index: 10;
	}
	.send-input {
		background-color: #f4f4f5;
		padding: 10px;
		border-radius: 50px;
		font-size: 26rpx;
		color: #c8c9cc;
		display: flex;
		flex: 1;
	}
	
	.toolbar {
		display: flex;
		align-items: center;
		margin-left: 20px;
		color: #82848a;
	}
	.toolbar-text {
		font-size: 26rpx;
		margin-left: 5px;
	}
</style>
